---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_display-minimal.json';
---

<Layout title={title}>
  <canvas id="twopoint5d" resize-to="window"></canvas>
</Layout>

<script>
  import {Display, ParallaxProjection, Stage2D, TextureFactory} from '@spearwolf/twopoint5d';
  import {Color, Sprite, SpriteMaterial} from 'three';
  import assetsUrl from '~demos/utils/assetsUrl';

  const canvas = document.getElementById('twopoint5d')!;
  const display = new Display(canvas);

  const width = 2288;
  const height = 3264;

  const stage = new Stage2D(
    new ParallaxProjection('xy|bottom-left', {
      width: width,
      height: height,
      fit: 'contain',
    }),
  );
  
  stage.scene.background = new Color('#272727');

  (window as any).display = display;
  (window as any).stage = stage;

  const textureFactory = new TextureFactory(display.renderer, ['nearest', 'flipy', 'srgb']);

  const textureImage = textureFactory.load(assetsUrl('xtc_design_spw96.png'));

  const material = new SpriteMaterial({map: textureImage});
  const sprite = new Sprite(material);

  sprite.scale.set(width, height, 1);
  stage.scene.add(sprite);

  display.on('init', ({renderer}) => {
    renderer.setClearColor(new Color('#0050A0'), 1.0);
  });

  display.on('resize', ({width, height}) => {
    stage.resize(width, height);
  });

  display.on('frame', ({renderer, now, deltaTime, frameNo}) => {
    stage.renderFrame(renderer, now, deltaTime, frameNo);
  });

  display.start();

  console.log('display=', display);
  console.log('stage=', stage);
</script>
